<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>我的第一个javaScript</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="js/bootstrap.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style>
        .btn-input {
            width: 100%;
            text-align: left;
            margin-top: 5px;
        }

        .div-img {
            width: 300px;
            height: 300px;
            border-width: 2px;
            border-style: dashed;
        }

        .div-img img {
            width: 100%;
            height: 100%;
        }

        .h1-title {
            margin-top: 10px;
            text-align: center;
            background-color: #337ab7;
            border-color: #337ab7;
            padding: 0px;
        }

        table .success td {
            color: #3c763d;
        }

        table .success td:first-child {
            width: 15%;
        }

        .left-menu-margin-top {
            margin-top: 5px;
        }

        .width-100 {
            width: 100%;
        }
    </style>
    <script>
        var imagePath=""
        $(function () {
            $("#file").change(function () {
                let reader = new FileReader();
                let file = this.files[0];
                // 读取完成
                reader.onload = function (e) {
                    //获取图片dom
                    //图片路径设置为读取的图片
                    $("#img").attr("src", e.target.result)
                    //上传文件
                    var strData = new FormData();
                    strData.append("file", file);
                    $.ajax({
                        type: "POST",
                        url: "/typing_game/upFace",
                        data: strData,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (data) {
                            if (data.code==0){
                                alert("图片上传成功")
                                imagePath=data.data
                                console.log(data)
                            }else {
                                alert("图片上传失败")
                            }
                        }
                    })
                };
                reader.readAsDataURL(file);
            })
        })


        function face_result() {
            $.ajax({
                url: "/typing_game/resultFace",
                type: "get",
                data: {
                    imagePath:imagePath
                },
                success: function (result) {
                   if (result.code==0){
                       obj=JSON.parse(result.data)
                       if (obj.face_1.property.glass==0){
                           $(".glasses").text("不戴眼镜")
                       }else {
                           $(".glasses").text("戴眼镜")
                       }

                        if (obj.face_1.property.beard==0){
                            $(".beard").text("没有胡须")
                        }else {
                            $(".beard").text("有胡须")
                        }

                        if (obj.face_1.property.gender==0){
                            $(".sex").text("男性")
                        }else {
                            $(".sex").text("女性")
                        }

                        if (obj.face_1.property.expression==0){
                            $(".expression").text("惊讶")
                        }else if(obj.face_1.property.expression==1){
                            $(".expression").text("害怕")
                        }else if(obj.face_1.property.expression==2){
                            $(".expression").text("厌恶")
                        }else if(obj.face_1.property.expression==3){
                            $(".expression").text("高兴")
                        }else if(obj.face_1.property.expression==4){
                            $(".expression").text("悲伤")
                        }else if(obj.face_1.property.expression==5){
                            $(".expression").text("生气")
                        }else {
                            $(".expression").text("正常")
                        }
                   }else {
                       console.log(imagePath)
                       alert("请先上传图片")
                   }
                },
                error:function (){
                    alert("请先上传图片")
                }
            })
        }

    </script>

</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <input class="btn btn-default btn-input left-menu-margin-top" onclick="check_a()" type="button"
                   value="首页"><br>
            <div class="btn-group left-menu-margin-top width-100">
                <button type="button" class="btn btn-default dropdown-toggle width-100" style="text-align: left;"
                        data-toggle="dropdown">
                    人脸识别
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu width-100" role="menu">
                    <li>
                        <a href="#">人脸特征分析</a>
                    </li>
                    <li>
                        <a href="#">人脸对比</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-10" style="border: 1px solid #337ab7;">
            <div class="col-md-12">
                <h1 class="panel-heading h1-title">
                    <strong style="color: white;">人脸特征综合分析能力演示</strong>
                </h1>
            </div>
            <div class="col-md-12" style="text-align: center;">
                人脸特征分析，基于深度学习算法，可以检测图像中的人脸并进行一系列人脸相关的特征分析。
            </div>
            <div class="col-md-6">
                <h4>
                    <strong>请选择需要人脸特征分析的图片文件</strong>
                </h4>
                <input type="file" id="file"/>
                <h4></h4>
                <div class="div-img" style="width: 100%;">
                    <img src="image/default.png" id="img" alt="默认图片" class="img-rounded">
                </div>
                <br>
                <button type="button" onclick="face_result()" class="btn btn-primary"
                        style="width: 100%;">识别
                </button>
                <h4></h4>
                <p class="text-muted">*图片文件仅支持.jpg/.jpeg/.png/.bmp格式，图片大小不超过800k</p>
                <p class="text-muted">*请提供清晰的人脸照片</p>
            </div>
            <div class="col-md-6">
                <h4>
                    <strong>人脸特征识别结果</strong>
                </h4>
                <input type="file" style="visibility: hidden;"/>
                <h4></h4>
                <div class="div-img" style="width: 100%;padding: 10px;">
                    <table class="table table-condensed">
                        <tr class="success">
                            <td>眼镜</td>
                            <td class="glasses">待定</td>
                        </tr>
                        <tr class="success">
                            <td>胡须</td>
                            <td class="beard">待定</td>
                        </tr>
                        <tr class="success">
                            <td>性别</td>
                            <td class="sex">待定</td>
                        </tr>
                        <tr class="success">
                            <td>表情</td>
                            <td class="expression">待定</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
